<template>
    <jb-crud-page ref="keywordRef" :edit-component="Edit" :search-url="`/api/admin/wechatAutoReply/datas`"
                  :search-conditions="pageConditions" :reset-btn-shown="false">
        <template #title>
            <div class="flex items-center">
                <span>关键词回复</span>
                <!--                <span class="text-14px ml-50px">{{}}条记录</span>-->
            </div>
        </template>

        <template #conditions-form>
            <n-input
                v-model:value="pageConditions.keywords"
                type="text"
                style="width: 130px"
                placeholder="输入关键字搜索"
            />
        </template>

        <template #opt>
            <jb-btn type="primary" ghost :icon="Icons.ADD" @click="keywordRef?.showEditModal('新增',{mpId:props.id})">
                新增
            </jb-btn>
        </template>

        <template #default="{ state,list }">
            <div class="flex items-center justify-start mb-5">
                <n-alert title="" type="info">
                    在这里配置无消息返回时默认返回的消息，可以配置多个规则，但是同时只能启用一个规则，每个规则可以配置多个可返回消息
                </n-alert>
            </div>
            <vxe-table
                class="flex-col flex-1"
                show-overflow="tooltip"
                :seq-config="{ startIndex: state.tableStartIndex }"
                :column-config="{ resizable: true }"
                border
                show-header-overflow
                :row-config="{ isHover: true }"
                align="center"
                :data="list"
            >
                <jb-column type="seq" title="序号" width="60"></jb-column>
                <jb-column field="name" title="名称" min-width="300"></jb-column>

                <jb-column field="replyType" title="回复类型" width="120">
                    <template #default="{ row }">
                        <n-tag type="primary">{{ row.replyType == '1' ? '随机一条' : '全部' }}</n-tag>
                    </template>
                </jb-column>
                <jb-column field="type" title="关键词" width="120">
                    <template #default="{ row }">
                        <jb-btn :drawer-component="WordManage" drawer-title="关键词管理"
                                drawer-positive-text=""
                                :drawer-component-props="{
                                mpId:row.mpId,
                                id:row.id
                            }"
                                icon="carbon:settings-edit"
                                quaternary
                                circle
                                tip-text="关键词管理"
                                :drawer-args="{
                                negativeText: '关闭',
                                defaultWidth: '1400',
                                resizable: true,
                                drawerClass: 'user_msg_tips'
                            }"
                                @drawer-yes-click=""></jb-btn>
                    </template>
                </jb-column>
                <jb-column field="remark" title="回复内容" width="140">
                    <template #default="{ row }">
                        <jb-btn :drawer-component="ContentManage" drawer-title="内容管理"
                                drawer-positive-text=""
                                :drawer-component-props="{
                                mpId:row.mpId,
                                id:row.id
                            }"
                                icon="carbon:settings-edit"
                                quaternary
                                circle
                                tip-text="管理"
                                :drawer-args="{
                                negativeText: '关闭',
                                defaultWidth: '1400',
                                resizable: true,
                                drawerClass: 'user_msg_tips'
                            }"
                                @drawer-yes-click=""></jb-btn>
                    </template>
                </jb-column>
                <jb-column field="enable" title="是否启用" width="80">
                    <template #default="{ row }">
                        <jb-switch
                            v-model:value="row.enable"
                            :url="`/api/admin/wechatAutoReply/toggleEnable/${props.id}-3-${row.id}`"
                            @change="keywordRef?.loadData()"
                        ></jb-switch>
                    </template>
                </jb-column>
                <jb-column field="createTime" title="创建时间" width="140"></jb-column>
                <jb-column title="操作" fixed="right" width="100">
                    <template #default="{ row }">
                        <jb-btn
                            tip-text="编辑"
                            icon="uil:edit-alt"
                            secondary
                            type="warning"
                            quaternary
                            circle
                            strong
                            @click="
                                keywordRef?.showEditModal('编辑', {
                                    mpId:props.id,
                                    id: row.id
                                })
                            "
                        ></jb-btn>
                        <jb-btn
                            tip-text="删除"
                            icon="ant-design:delete-filled"
                            secondary
                            type="error"
                            quaternary
                            circle
                            strong
                            class="mx-8px"
                            confirm-text="确定删除这条数据？"
                            :url="`/api/admin/wechatAutoReply/delete/${props.id}-3-${row.id}`"
                            @success="keywordRef?.loadData()"
                        ></jb-btn>
                    </template>
                </jb-column>
            </vxe-table>
        </template>
    </jb-crud-page>
</template>

<script setup lang="ts">
import {ref} from "vue";
import JbCrudPage from "@/components/_builtin/jb-crud-page/index.vue";
import {useResetableData} from "@/hooks/common/use-resetable-data";
import JbBtn from "@/components/_builtin/jb-btn/index.vue";
import {Icons} from "@/constants";
import Edit from "./edit/index.vue";
import ContentManage from "./content-manage/index.vue"
import WordManage from "./word-manage/index.vue"

const props = withDefaults(
    defineProps<{
        id: string
    }>(),
    {
        id: '',
    }
)

const keywordRef = ref<InstanceType<typeof JbCrudPage> | null>(null)
const pageConditions = useResetableData({
    keywords: '',
    type: 3,
    mpId: props.id
})


</script>


<style scoped>

</style>